<template>
  <!-- 商品详情-关联视频 8/43 -->
  <div id="videoDetails">
    <template v-if="vipRootObj[8][43].owner">
      <template v-if="!once">
        <div class="top">
          <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
          <div class="optionsBox">
            <el-date-picker
              class="long_time"
              v-model="liveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              prefix-icon="el-icon-arrow-down"
              unlink-panels
              :clearable="false"
              :picker-options="pickeroptions"
              value-format="yyyy-MM-dd"
              @change="onPick1"
            ></el-date-picker>
          </div>
        </div>
        <!-- 视频销量趋势 -->
        <div class="v_trend">
          <div class="title">视频销量趋势</div>
          <div class="volume">
            <div>
              总销量(件)
              <span>{{format_num(trend.volume)}}</span>
            </div>
            <div>
              总销售额
              <span>{{format_num(trend.amount)}}</span>
            </div>
          </div>
          <div class="trend">
            <KChart
              v-if="!plLoading && trendX.length"
              :xData="trendX"
              :series1="trendY"
              name1="销量"
            />
            <div class="no_data" v-if="!trendX.length && !plLoading">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="plLoading"
              v-if="plLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
        <!-- 视频列表 -->
        <div class="titless">视频列表</div>
        <div class="dis_flex">
          <div class="searchBox">
            <el-input
              type="text"
              v-model="keyWords"
              @keyup.enter.native="toSearch"
              placeholder="请输入视频名称关键词搜索"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
            </div>
          </div>
          <img class="check" src="@/assets/meng/s1.png" v-if="checked" @click="check" />
          <img class="check" src="@/assets/meng/s2.png" v-else @click="check" />
          <span class="txt" @click="check">屏蔽已删除视频</span>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>视频</th>
              <th
                @click="sort_fun(false, 'Duration')"
                v-if="orderBy == 'desc' && sort == 'Duration'"
                class="cursor"
              >
                时长
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'Duration'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'Duration')">
                时长
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'Duration'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(false, 'releasetime')"
                v-if="orderBy == 'desc' && sort == 'releasetime'"
              >
                发布时间
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'releasetime'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'releasetime')">
                发布时间
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'releasetime'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!-- 预估销售额 ，预估销量 -->
              <th @click="sort_fun(false, 'Volume')" v-if="orderBy == 'desc' && sort == 'Volume'">
                预估销量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'Volume'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'Volume')">
                预估销量
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'Volume'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th @click="sort_fun(false, 'Amount')" v-if="orderBy == 'desc' && sort == 'Amount'">
                预估销售额
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'Amount'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'Amount')">
                预估销售额
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'Amount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!--  -->
              <th
                @click="sort_fun(false, 'FavoriteCount')"
                v-if="orderBy == 'desc' && sort == 'FavoriteCount'"
                class="cursor"
              >
                点赞数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'FavoriteCount'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'FavoriteCount')">
                点赞数
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'FavoriteCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>

              <th
                @click="sort_fun(false, 'CommentCount')"
                v-if="orderBy == 'desc' && sort == 'CommentCount'"
                class="cursor"
              >
                评论数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'CommentCount'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'CommentCount')">
                评论数
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'CommentCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>

              <th
                @click="sort_fun(false, 'ShareCount')"
                v-if="orderBy == 'desc' && sort == 'ShareCount'"
                class="cursor"
              >
                转发数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderBy == 'desc' && sort == 'ShareCount'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(true, 'ShareCount')">
                转发数
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderBy == 'asc' && sort == 'ShareCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, i) in table_data01" :key="i + 'a'">
              <td>
                <div class="live_box">
                  <div class="live_box1">
                    <img
                      :src="item.thum_pic"
                      @mousemove="move(i)"
                      @mouseout="out"
                      @click="tourl(item.url)"
                      v-errorImg:video
                    />
                    <img
                      src="@/assets/meng/play.png"
                      @click="tourl(item.url)"
                      @mousemove="move(i)"
                      v-if="i == ind"
                      class="play"
                    />
                    <!-- <div class="live_box_01">
                  <p class="livingGif">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                    </div>-->
                  </div>

                  <div class="live_box_right">
                    <div
                      class="title"
                      @click="
                      dialog = false; // 弹出框
                      active_name01 = '0';
                      video_id = item.aweme_id;
                      Routinghop(item.aweme_id)
                    "
                    >
                      <img class="car" src="@/assets/zhao/live/shop.png" alt />
                      {{ item.title }}
                    </div>
                    <div class="time">
                      <span
                        v-for="(item_son, index_son) in item.hotword.slice(0, 3)"
                        :key="index_son + 'key'"
                      >{{ item_son.name }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td>{{ format_time(item.duration) }}</td>
              <td>{{ timestamp(item.release_time, "M-D h:m") }}</td>
              <!-- 预估销售，销售额 -->
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.amount) }}</td>
              <!--  -->
              <td>{{ format_num(item.favorite_count) }}</td>
              <td>{{ format_num(item.comment_count) }}</td>
              <td>{{ format_num(item.share_count) }}</td>
            </tr>
          </tbody>
        </table>
        <!-- <p
        class="nothing"
        v-if="table_data01.length && !listLoading && page * size >= total"
      >
        我是有底线的～
        </p>-->

        <div class="pageBox" v-if="total > size && !listLoading && table_data01.length">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="get_data"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
        <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
      </template>
      <div class="zw_box" v-if="!table_data01.length && !listLoading ">
        <div class="zw">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
      <div
        v-if="table_data01.length == 0 && listLoading && !once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        v-if="once"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
    </template>
    <div class="dialogEg" v-else>
      <img :src="$global.staticUrl + 'image/egImg/goodsJurisdiction3.png'" alt />
      <payVip routerName="compare" :lowestVipNum="vipRootObj[8][43].ownerMinLevel" />
    </div>
  </div>
</template>

<script>
import pop from '@/pages/meng/video/pop';
import live_houseVue from '../../meng/live/live_house.vue';
import MultiSelect from '@/component/multi_select.vue';
import KChart from '../../wang/talent/tdetails/NewComponents/KChart.vue';
export default {
  data() {
    return {
      once: true,
      dialog: false,
      active_name01: '1',
      //   以上是弹出窗
      ind: null,
      size: 9,
      total: null,
      listLoading: false,
      table_data01: [],
      is_del: 0,
      checked: true,
      KindName: '30天',
      liveTime: [],
      startDate: '',
      endDate: '',
      keyWords: '',
      orderBy: 'desc', //1降序 0升序
      sort: 'releasetime',
      page: 1,
      // 销量趋势图
      trendX: [],
      trendY: [],
      trend: [],
      plLoading: false,
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 || time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        }
      },
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  computed: {},
  created() {
    if (this.vipRootObj[8][43].owner) {
      this.gettrend();
    }
    this.getTime();
    // this.setTBBar();
  },
  mounted() {
    // window.addEventListener("scroll", this.initHeight);
    // window.addEventListener("resize", () => {
    //   //给浏览器窗口绑定变化大小事件
    //   this.setTBBar();
    // });
  },
  props: ['id'],
  watch: {
    KindName: function (newVal, oldVal) {
      if (this.KindName != '') {
        this.table_data01 = [];
        this.KindName = newVal;
        this.getTime();
        this.gettrend();
      }
    },
    keyWords: function (newVal, oldVal) {
      if (newVal == '') {
        this.table_data01 = [];
        this.getTime();
      }
    }
  },
  methods: {
    tourl(url) {
      window.location.href = url;
    },
    out() {
      this.ind = null;
    },
    move(i) {
      this.ind = i;
    },
    // fenye
    get_data(page) {
      this.table_data01 = [];
      this.page = page;
      this.getTime();
    },
    check() {
      this.checked = !this.checked;
      if (this.checked) {
        this.is_del = 0;
      } else {
        this.is_del = 1;
      }
      this.table_data01 = [];
      this.getTime();
    },
    onPick1() {
      this.KindName = '';
      this.table_data01 = [];
      this.page = 1;
      this.getTime();
      this.gettrend();
    },
    //搜索
    toSearch() {
      this.page = 1;
      this.table_data01 = [];
      this.getTime();
    },

    getTime() {
      this.listLoading = true;
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      this.$axios
        .post('/api/product/SearchProAweme', {
          keyword: this.trimStr(this.keyWords),
          category: 0,
          star_time: this.startDate,
          end_time: this.endDate,
          is_del: this.is_del,
          pro_id: this.id,
          // pro_id: "3480244482744692868",
          size: this.size,
          page: this.page,
          order_by: this.orderBy,
          sort: this.sort
        })
        .then(response => {
          // this.loading = false
          if (response.data.code == 1003) {
            this.once = false;
            this.listLoading = false;
          } else if (response.data.code == 0) {
            this.once = false;

            this.total = response.data.count;
            this.table_data01 = response.data.data;
            this.listLoading = false;
          } else {
            this.once = false;
            this.table_data01 = [];

            this.listLoading = false;
          }
        });
      //  //
    },
    gettrend() {
      this.plLoading = true;
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.$axios
        .get(
          `/api/product/proawemetrend?proid=${this.id}&startdate=${this.startDate}&enddate=${this.endDate}`
        )
        .then(res => {
          if (res.data.code == 0) {
            this.plLoading = false;
            this.trendX = res.data.data.trend[0].map(element => {
              return this.timestamp(element, 'M-D');
            });
            this.trendY = res.data.data.trend[1];
            this.trend = res.data.data;
          }
        });
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderBy = 'desc';
      } else {
        this.orderBy = 'asc';
      }
      this.sort = parm02;
      this.table_data01 = [];
      this.getTime();
    },
    // 点击视频详情跳转路由
    Routinghop(id) {
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
    }
  },
  components: {
    MultiSelect,
    pop,
    KChart
  }
};
</script>

<style scoped lang="less">
#videoDetails {
  .zw_box {
    position: relative;
    height: 400px;
  }
  min-width: 807px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .car {
    width: 16px !important;
    height: 13px !important;
    text-align: left;
    vertical-align: baseline;
  }
  .top {
    display: flex;
    justify-content: flex-end;
  }
  .optionsBox {
    margin-left: 10px;
  }
  // 直播列表
  .titless {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: #222;
    position: relative;
    text-indent: 9px;
  }
  .titless:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
    border-radius: 2px;
  }

  // 视频销量趋势图
  .v_trend {
    .title {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0;
      color: #222;
      position: relative;
      text-indent: 9px;
    }
    .title:after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
    .volume {
      display: flex;
      margin-top: 16px;
      div {
        width: 354px;
        line-height: 50px;
        padding: 0 52px;
        background: #f5f5f5;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 18px;
        color: #888;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #222;
          font-family: DINAlternate-Bold;
        }
      }
    }
    .trend {
      width: 100%;
      height: 290px;
    }
    .no_data {
      width: 100%;
      height: 290px;
      text-align: center;
      font-size: 14px;
      color: #888;
      img {
        display: block;
        margin: 120px auto 0px auto;
      }
    }
  }
  //
  .dis_flex {
    display: flex;
    padding-top: 20px;
    .check {
      margin-left: 25px;
      margin-right: 5px;
      width: 16px;
      height: 16px;
      align-self: center;
      cursor: pointer;
    }
    .txt {
      cursor: pointer;
      align-self: center;
      font-size: 14px;
      letter-spacing: 0px;
      color: #555555;
    }
  }
  // 搜索框
  .searchBox {
    width: 308px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    // margin-top: 21px;
    .el-input__inner {
      flex: 1;
    }
    .imgBox:hover {
      background: url('../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
      background-size: 15px 15px;
    }
    .imgBox {
      width: 40px;
      height: 30px;
      border-radius: 0px 4px 4px 0px;
      cursor: pointer;
      display: grid;
      place-items: center;
      background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px,
        #fff;
      background-size: 15px 15px;
      img {
        width: 15px;
        height: 15px;
      }
    }
  }
  table {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    box-sizing: border-box;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
      tr {
        width: 100%;
        height: 48px;
        background-color: #f5f9ff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #555;
        th:nth-child(1) {
          width: 12%;
          min-width: 244px;
          text-align: left;
          padding-left: 39px;
        }
        th:nth-child(2) {
          width: 12%;
          cursor: pointer;
          text-align: center;
        }

        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6) {
          width: 10.8%;
          cursor: pointer;
        }
      }
    }

    tbody {
      tr {
        height: 78px;
        .live_box {
          min-width: 360px;
          padding-left: 39px;
          display: flex;
          overflow: hidden;
          text-overflow: ellipsis;
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            cursor: pointer;
            object-fit: cover;
          }
          .live_box1 {
            position: relative;
          }
          .play {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
          }
          .live_box_right {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .title {
            &:hover {
              color: #ff924b !important;
            }
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #222222;
            white-space: nowrap;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
          }
          .time {
            display: flex;
            margin-top: 5px;
            > span {
              margin-right: 5px;
              white-space: nowrap;
              display: inline-block;
              padding: 0px 9px;
              box-sizing: border-box;
              border: solid 1px #fd7f2c;
              background-color: transparent;
              height: 22px;
              line-height: 20px;
              border-radius: 11px;
              font-size: 12px;
              letter-spacing: 0px;
              color: #fd7f2c;
            }
          }
          > div {
            position: relative;
            margin-right: 11px;
            .live_box_01 {
              position: absolute;
              bottom: 0px;
              right: -1px;
              width: 18px;
              height: 18px;

              background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
                linear-gradient(#ffffff, #ffffff);
              background-blend-mode: normal, normal;
              border-radius: 6px 0 4px 0px;
              font-size: 12px;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-left: 2px;
            }
          }
        }

        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
